/**
  - 状态state，即数据，是组件内部的私有数据，只能在组件内部使用
  - 状态 state 的值是对象，表示一个组件中可以有多个数据
  - 通过 this.state.xxx 来获取状态

 */

import { Component } from 'react'

/**
  react中
  在class  定义状态 类似 vue中的  data数据
 */

/**
 * vue修改数据思想：== 数据可变 == =》 可以直接修改之前的值
 * vue修改数据：this.变量名 = 新值
 *
 * react修改数据思想：== 数据不可变 == => 不能直接修改之前的值
 * 使用一个方法：this.setState({
 *    变量名1:最新修改的值1,
 *    变量名2:最新修改的值2,
 *    ...
 * })
 * 说明❓，修改数据口诀：新值覆盖老值
 */

class TestState extends Component {
  state = {
    count: 0,
    obj: {
      age: 18,
    },
    list: [1, 2],
  }

  handClick = () => {
    this.setState({
      count: this.state.count + 1,
      obj: { ...this.state.obj, lin: 20 },
      list: [...this.state.list, Math.random()],
    })
  }
  render() {
    return (
      <div>
        <h1>类组件的状态</h1>
        {/* 2通过this。state。变量名 */}
        <ul>
          <li>{this.state.count}</li>
          <li>{this.state.obj.age}</li>
          <li>{this.state.list}</li>
          <li>
            <button onClick={this.handClick}>点击两下</button>
          </li>
          <li></li>
        </ul>
      </div>
    )
  }
}
export default TestState
